<script lang="ts" setup>
import { ref, watch } from 'vue';

withDefaults(
  defineProps<{
    startPlaceholder?: string;
    endPlaceholder?: string;
    startTimeStart?: string;
    startStep?: string;
    startTimeEnd?: string;
    endTimeStart?: string;
    endStep?: string;
    endTimeEnd?: string;
  }>(),
  {
    startPlaceholder: '请选择开始时间',
    endPlaceholder: '请选择结束时间',
    startTimeStart: '08:00',
    startStep: '00:30',
    startTimeEnd: '24:00',
    endTimeStart: '08:00',
    endStep: '00:30',
    endTimeEnd: '24:00',
  },
);

const startTime = ref<string>('');
const endTime = ref<string>('');
const endTimeDisable = ref<boolean>(true);

const emits = defineEmits(['changeStartTime', 'onChange']);

watch(
  () => startTime.value,
  (val) => {
    if (val === '') {
      endTime.value = '';
      endTimeDisable.value = true;
      return;
    }
    endTimeDisable.value = false;
    emits('changeStartTime', val);
  },
);

watch(
  () => endTime.value,
  (val) => {
    if (val === '') return;
    emits('onChange', {
      startTime: startTime.value,
      endTime: val,
    });
  },
);
</script>

<template>
  <div>
    <div class="choose-time">
      <div class="start-time">
        <el-time-select
          v-model="startTime"
          :placeholder="startPlaceholder"
          :start="startTimeStart"
          :end="startTimeEnd"
          :step="startStep"
          v-bind="$attrs.startOptions"
        >
        </el-time-select>
      </div>
      <div class="end-time">
        <el-time-select
          v-model="endTime"
          :placeholder="endPlaceholder"
          :start="endTimeStart"
          :end="endTimeEnd"
          :step="endStep"
          :disabled="endTimeDisable"
          :min-time="startTime"
          v-bind="$attrs.endOptions"
        >
        </el-time-select>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.choose-time {
  display: flex;
}
</style>
